<style type="text/css">
    .thumb-container{overflow: auto;height: 200px;margin-bottom: 20px;width:100%;}
    .thumb-container td{position: relative;width: 154px;}
    .thumb-container td a.image-container{
	display: block;
	border: 1px solid #eeeeee;
	padding:1px;
	width:150px;
	height:150px;
	overflow: hidden;
    }
    .thumb-container td a img{display: block;}
    .thumb-container td a.cover,
    .thumb-container td a.delete,
    .thumb-container td a.order{
	display: inline;
        padding-top: 0;padding-bottom: 0;
        background-color: #eaeaea;
        color: #333333;
    }
</style>

<?php if (isset($photos) && count($photos) > 0): ?>
    <div class="thumb-container">
        <table>
            <tbody>
                <tr>
                    <?php foreach ($photos as $photo): ?>
                        <td>
                            <a href="javascript:void(0);" class="image-container" title="light-box">
                                <img src="/assets/uploads/<?php echo preg_replace("/(\.[^\.]+$)/", '_thumb$1', $photo->file_name); ?>" alt="<?php echo $photo->description; ?>" onload="window.alignImage(this,150,150);"/>
                            </a>
                            <a href="javascript:void(0);" class="delete" data="<?php echo $photo->id; ?>">删除</a>
                            <a href="javascript:void(0);" class="cover" data="<?php echo $photo->id; ?>">设为封面</a>
			    <a href="javascript:void(0);" class="order" data="<?php echo $photo->id; ?>">排序</a>
                        </td>
                    <?php endforeach; ?>
                </tr>
            </tbody>
        </table>
    </div>
<?php endif; ?>

<script type="text/x-jquery-tmpl" id="order-form-template">
    <form action="/backend/photo/order" method="post">
	<input type="hidden" name="id" value="${id}"/>
	<div class="form-row">
	    <label form="order">顺序</label>
	    <input type="text" class="text" name="order"/>
	</div>
	<div class="form-button">
	    <input type="submit" name="submit" value="提交"/>
	</div>
    </form>
</script>

<script type="text/javascript">
    $(function(){
        //删除单个图片
        $('.thumb-container td a.delete').live('click',function(){
            var id = Z.parseInt($(this).attr('data')),td = $(this).parent();
            Z.confirm({
                content: '确定要删除吗？',
                onConfirm: function(){
                    Z.ajax({
                        url: Z.url('/backend/photo/delete'),
                        data: {id:id},
                        success: function(){
                            $(td).remove();
                        }
                    });
                }
            });
            return false;
        });
    
        $('.thumb-container td a.cover').live('click',function(){
            var id = Z.parseInt($(this).attr('data'));
            Z.ajax({
                url: Z.url('/backend/photo/cover/'+id,true)
            });
            return false;
        });
	
	$('.thumb-container td a.order').live('click',function(){
	    var id = Z.parseInt($(this).attr('data'));
	    Z.form({
		width: 500,
		content : $('#order-form-template').tmpl({id : id}),
		success : function(){
		    window.location.reload();
		}
	    });
	    return false;
	});
    
        $('.thumb-container td a.delete').css('opacity','0.8');
            
        new Z.LightBox($('.thumb-container td a.image-container'));
        
        Z.alignImage($('.thumb-container td a.image-container img'),150,150);
    });
</script>